<%--
  Created by IntelliJ IDEA.
  User: W
  Date: 2022/1/1
  Time: 22:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>单人五子棋</title>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
        <style type="text/css">
            canvas {
                display: block;
                margin: 50px auto;
                background-color: sandybrown;
                /*box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767;*/
            }
        </style>
        <script type="text/javascript">
            $(function () {
                var chess = document.getElementById("board");
                var context = chess.getContext('2d');
                var role = true;
                var chessBox = [];//用于存放棋盘中落子的情况
                for (var i = 0; i < 15; i++) {
                    chessBox[i] = [];
                    for (var j = 0; j < 15; j++) {
                        chessBox[i][j] = 0;//初始值为0
                    }
                }

                function drawChessBoard() {
                    for (var i = 0; i < 15; i++) {
                        context.strokeStyle = "#D6D1D1";
                        context.moveTo(15 + i * 30, 15);//垂直方向画15根线，相距30px;
                        context.lineTo(15 + i * 30, 435);
                        context.stroke();
                        context.moveTo(15, 15 + i * 30);//水平方向画15根线，相距30px;棋盘为14*14；
                        context.lineTo(435, 15 + i * 30);
                        context.stroke();
                    }
                }

                drawChessBoard();//绘制棋盘
                function oneStep(i, j, k) {
                    context.beginPath();
                    context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);//绘制棋子
                    var g = context.createRadialGradient(15 + i * 30, 15 + j * 30, 13, 15 + i * 30, 15 + j * 30, 0);//设置渐变
                    if (k) {    //k=true是黑棋，否则是白棋
                        g.addColorStop(0, '#0A0A0A');//黑棋
                        g.addColorStop(1, '#636766');
                    } else {
                        g.addColorStop(0, '#D1D1D1');//白棋
                        g.addColorStop(1, '#F9F9F9');
                    }
                    context.fillStyle = g;
                    context.fill();
                    context.closePath();
                }
                $(chess).click(function (e) {
                    var x = e.offsetX;//相对于棋盘左上角的x坐标
                    var y = e.offsetY;//相对于棋盘左上角的y坐标
                    var i = Math.floor(x / 30);
                    var j = Math.floor(y / 30);
                    if (chessBox[i][j] === 0) {
                        oneStep(i, j, role);
                        if (role) {
                            chessBox[i][j] = 1;
                        } else {
                            chessBox[i][j] = 2;
                        }
                        role = !role;//下一步白棋
                    }
                });
            });
        </script>
    </head>
    <body>
        <canvas id="board" width="450px" height="450px"></canvas>

    </body>
</html>
